<!--顶部导航-->
<div class="welcome-header-wrap" id="Dheader" style="display: none;" :style="{display: 'block'}">
    <header class="welcome-header">
        <el-menu :default-active="activeTab" text-color="#636363" class="el-menu headerMenu" mode="horizontal" >
            <el-menu-item index="1" class="headerLogo" v-if="userData['vip_status'] != 1 && logined">
                <a href="/tally">
                    <img class="logo_img" src="<?= \common\services\DomainExtraConfigService::getVal('logoPath');?>" alt="<?= \common\services\DomainExtraConfigService::getVal('name');?>">
                </a>
            </el-menu-item>


            <el-menu-item index="1" style="text-align: center" class="headerLogo" v-else>
                <a href="/tally">
                    <img  src="/static/images/juncheng.png" style="width: 46px;height: 46px"/>
                </a>
            </el-menu-item>
			<el-menu-item index="2" class="menuIndex" v-if="userData['vip_status'] != 1 && logined">
                <a href="/index" rel="nofollow"><i class="el-icon-monitor"></i> 首页</a>
            </el-menu-item>
            <el-menu-item index="3" class="menuTally">
                <a href="/tally" rel="nofollow"><i class="el-icon-edit"></i> 记账</a>
            </el-menu-item>
            <el-submenu index="6" v-if="logined" style="float:right;" class="menuUser">
                <template slot="title"><i class="el-icon-user icon-user"></i><span>{{userData.username ? userData.username : userData.mobile }}</span></template>
                <el-menu-item index="6-1" v-if="logined">
                    <a href="/personal"><i class="el-icon-user"></i>个人中心</a>
                </el-menu-item>
                <el-menu-item index="6-2"><a href="javascript:;" v-on:click="logout"><i class="el-icon-switch-button"></i>安全退出</a></el-menu-item>
<!--                <el-menu-item index="6-3"><a href="/personal">个人中心</a></el-menu-item>-->
            </el-submenu>


            <el-menu-item index="8" v-if="!logined">
                <a  href="/login" rel="nofollow">登录</a>
            </el-menu-item>
            <el-menu-item index="9" v-if="!logined">
                <a  href="/register" rel="nofollow">注册</a>
            </el-menu-item>
        </el-menu>
    </header>
</div>

<script>
    var logined = true
    var activeTab = '<?php echo $this->params['activeTab'];?>'
    new Vue({
        el: '#Dheader',
        computed:{
            userData () {
                return this.$store.state.userData
            },
        },
        data(){
            return {
                activeTab:activeTab,
                logined:false,
                userData:{}
            }
        },

        mounted() {
            this._initLogin();
        },
        methods: {
            _initLogin (){
                var loginToken  =  localStorage.getItem('loginToken');
                if(loginToken != null ){
                    // 调用token获取
                    this.getUserByToken(loginToken);
                }else{
                    localStorage.removeItem('userInfo');
                    logined = false
                }
            },
            getUserByToken(token) {
                let that = this;
                axios.get('/api/user/get-info',{
                    method: 'get',
                    headers: {'token': token},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        // 存入本地存储
                        var userData = res.data.data;
                        localStorage.setItem('userInfo',JSON.stringify(userData));
                        that.showUserData(userData);
                        logined = true
                    }else{
                        that.$message({
                            type: 'error',
                            message: '登录信息已失效~请重新登录'
                        });
                        localStorage.removeItem('userInfo');
                        localStorage.removeItem('loginToken');
                        setTimeout(function () {
                            window.location.href='/login';
                        },3000)
                    }
                    console.log(res);
                });
            },
            showUserData(userData) {
                this.logined = true ;
                this.userData = userData;
            },
            logout(){
                let that = this
                let loginToken  =  localStorage.getItem('loginToken');
                axios.get('/api/user/logout',{
                    method: 'get',
                    headers: {'token': loginToken},
                }).then(function(res) {
                    that.$message({
                        type: 'success',
                        message: '退出成功~跳转中...'
                    });
                    localStorage.removeItem('userInfo');
                    localStorage.removeItem('loginToken');
                    setTimeout(function () {
                        window.location.href='/';
                    },1000)
                });
            }
        }
    })
</script>
